<template>
  <div class="page-container">
    <div class="qrcode-content">
      <h3>微信扫码登录</h3>
      <div id="qrcode"></div>
      <div class="qrcode-prompt">
        <p>1.将该二维码保存至手机相册</p>
        <p>2.打开微信“扫一扫”功能，从相册中选取该二维码进行扫码识别，即可在微信中打开该页面并用微信登录。</p>
      </div>
      <div class="login-link">
        <p>
            <span>我已有帐号，</span>
            <a href="#/login">我要登录</a>
        </p>
       </div>
    </div>
  </div>
</template>

<script>
import QRcode from 'qrcodejs2';
export default {
  name: 'QRcode',
  mounted() {
      let qrcodeUrl = this.$route.query.ReferrerUrl ? decodeURIComponent(this.$route.query.ReferrerUrl) : `${window.location.href.split('#')[0]}#/`;
      new QRcode('qrcode', {
        text: qrcodeUrl,
        colorDark: '#000000',
        colorLight: '#ffffff'
      });
  }
};
</script>

<style>
.qrcode-content{
    width: 100%;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
}
#qrcode{
    width: 60vw;
    height: 60vw;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid #dcdfe6;
}
.qrcode-content>h3{
    width: 100%;
    font-size: 1.25em;
    color: #999;
    font-weight: normal;
    text-align: center;
    border-bottom: 1px solid #dcdfe6;
    padding: 10px 0;
}
.qrcode-prompt{
    width: 96%;
    margin: 0 auto;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    padding: 10px;
}
.qrcode-prompt>p{
    width: 100%;
    font-size: 1em;
    color: #999;
    line-height: 2em;
}
</style>
